/**
 * 放大镜类
 */
 class Glass {
	constructor(id) {
		this.rootEle = document.querySelector(id)
		this.mask = this.rootEle.querySelector('.mask') //mask遮罩层
		this.showBox = this.rootEle.querySelector('.m-left') //showbox显示盒子
		this.glassBox = this.rootEle.querySelector('.right-wraper') // 放大镜glassBox
		this.bgPic = this.rootEle.querySelector('.right-wraper>img') //背景图bgpic

        this.ulLis = this.rootEle.querySelectorAll('.left-wraper ul>li')
        this.showBoxPic = this.showBox.querySelector('img')

	}
	/**
	 * 计算放大镜图片的比例
	 *    目的: 遮罩层区域遮罩区域大小 与 放大镜放大区域大小相同
	 *      遮罩层mask           放大镜
	 *     -------------- =  -----------------
	 *      显示盒子showBox      背景图 ?
	 *     背景图 = 放大镜* showBox / mask
	 */
	setScale() {
		// 遮罩层mask
		let maskW = parseInt(window.getComputedStyle(this.mask).width)
		let maskH = parseInt(window.getComputedStyle(this.mask).height)
		// 显示盒子showBox
		let showBoxW = parseInt(window.getComputedStyle(this.showBox).width)
		let showBoxH = parseInt(window.getComputedStyle(this.showBox).height)
		// 放大镜glassBox
		let glassBoxW = parseInt(window.getComputedStyle(this.glassBox).width)
		let glassBoxH = parseInt(window.getComputedStyle(this.glassBox).height)

		// 背景图
		let bgPicW = (glassBoxW * showBoxW) / maskW
		let bgPicH = (glassBoxH * showBoxH) / maskH

		this.bgPic.style.width = bgPicW + 'px'
		this.bgPic.style.height = bgPicH + 'px'
	}
	/**
	 * 遮罩层移光标移动
	 *    offsetX offsetY  相对自身
	 *    clientX clientY  浏览器
	 *    pageX   pageY    页面
	 *
	 *    window.getComputedStyle(ele).width
	 *    offsetWidth
	 *    clientWidth
	 */
	onGlass() {
		let _this = this
        // 移入显示
        this.showBox.addEventListener('mouseover',()=>{
            this.mask.style.display = 'block'
            this.glassBox.style.display = 'block'

			this.glassBox.style.zIndex = 99
			// this.glassBox.setAttribute("z-index",999)


        })
        // 移出隐藏
        this.showBox.addEventListener('mouseout',()=>{
            this.mask.style.display = 'none'
            this.glassBox.style.display = 'none'
        })

		//showBox鼠标移动事件
		this.showBox.addEventListener('mousemove', function (e) {
			e = e || window.event
			let x = e.offsetX - _this.mask.clientWidth / 2
			let y = e.offsetY - _this.mask.clientHeight / 2

			// 边界检查
			if (x < 0) {
				x = 0
			}
			if (x > _this.showBox.clientWidth - _this.mask.clientWidth) {
				x = _this.showBox.clientWidth - _this.mask.clientWidth
			}
			if (y < 0) {
				y = 0
			}
			if (y > _this.showBox.clientHeight - _this.mask.clientHeight) {
				y = _this.showBox.clientHeight - _this.mask.clientHeight
			}

			// 移动遮罩层
			_this.mask.style.left = x + 'px'
			_this.mask.style.top = y + 'px'

			// 移动背景图片
			/*
               遮罩层       遮罩层移动距离
               ------ =   -----------------
               放大镜        背景图移动距离?
                背景图移动距离= 遮罩层移动距离*放大镜/遮罩层
            */
			// 遮罩层mask
			let maskW = parseInt(window.getComputedStyle(_this.mask).width)
			let maskH = parseInt(window.getComputedStyle(_this.mask).height)
			// 放大镜glassBox
			let glassBoxW = parseInt(window.getComputedStyle(_this.glassBox).width)
			let glassBoxH = parseInt(window.getComputedStyle(_this.glassBox).height)

            let moveX = x * glassBoxW / maskW
            let moveY = y * glassBoxH / maskH

			_this.bgPic.style.left = -moveX + 'px'
			_this.bgPic.style.top = -moveY + 'px'
		})
	}

    /**
     * 切换图片
     */
    onTab(product){
        let _this = this
        for(let i = 0; i < this.ulLis.length; i++){
            this.ulLis[i].addEventListener('mouseover',function(){
                // 清除所有选中效果
                _this.onClear()
                // 当前选设置选中效果
                this.className = 'active'
                // 显示盒子图片
                _this.showBoxPic.setAttribute('src',`${product.list[i]}`)
                // 背景图片切换
                _this.bgPic.setAttribute('src',`${product.list[i]}`)
            })
        }
    }
    onClear(){
        for(let i = 0; i < this.ulLis.length; i++){
            this.ulLis[i].className = ''
        }
    }
}
